<template>
  <div class="relation-img">
    <h2 class="relation-title">{{ detailInfo.title }}</h2>
    <!-- 所属图谱 、管理图谱-->
    <template
      v-if="
        detailInfo.type == 1 || detailInfo.type == 3 || detailInfo.type == 5
      "
    >
      <!-- <policyAtlas
        v-if="atlasData"
        :data="atlasData"
        :searchType="searchType"
      /> -->
      <vueTree :data="atlasData" :title="detailInfo.title" :defaultExpandLevel="1" :seachType="seachType"/>
    </template>
    <!-- 关联图谱 -->
    <template v-else-if="detailInfo.type == 2 || detailInfo.type == 6">
      <relevance
        :data="atlasData"
        :info="detailInfo"
        :searchType="searchType"
        v-if="atlasData?.length"
      />
    </template>
    <!-- 演变图谱 -->
    <template v-else-if="detailInfo.type == 4">
      <div class="evolve">
        <div v-for="(item, index) in evolveData" :key="index" class="flex-1">
          <div class="evolve-content">
            <div v-for="(subItem, idx) in item" :key="idx">
              <div class="evolve-top" v-if="idx == 0">
                <div
                  v-for="topItem in subItem"
                  :key="topItem"
                  class="evolve-card"
                  @click="goDetailPage(topItem.articleId, '2')"
                >
                  <span>{{ topItem.name }}</span>
                </div>
              </div>
              <div class="line" v-show="idx == 1"></div>
              <div class="evolve-bottom" v-if="idx == 1">
                <div
                  v-for="bottomItem in subItem"
                  :key="bottomItem"
                  class="evolve-card"
                  @click="goDetailPage(bottomItem.articleId, '2')"
                >
                  <span>{{ bottomItem.name }}</span>
                </div>
                <div
                  class="evolve-card"
                  v-for="other in item[0].length - item[1].length"
                  :key="other"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";

import { useRoute } from "vue-router"

import { useAtlasHook } from "./hook";

import relevance from "../../components/echarts/components/relevance.vue";
import vueTree from "../../components/vueTree/index.vue";
const route = useRoute();
const props = defineProps(["title"]);
const emits = defineEmits([""]);
const seachType = route.query.seachType
const { detailInfo, atlasData, evolveData, goDetailPage, searchType } =
  useAtlasHook();
</script>

<style scoped lang="postcss">
.relation-img {
  @apply p-4 overflow-hidden;
  .relation-title {
    @apply text-center;
    font-size: 30px;
    height: 50px;
    line-height: 50px;
  }
  .evolve {
    @apply w-full flex flex-wrap justify-between items-center;
    height: calc(100vh - 130px);
    .evolve-content {
      @apply w-full;
      .evolve-top {
        @apply relative;
        /* padding-bottom: 40px; */
        /* &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 30px;
          background: #ccc;
        } */
      }
      .evolve-bottom {
        padding-top: 20px;
        .evolve-card {
        }
      }
      .evolve-top,
      .evolve-bottom {
        @apply w-full;
        .evolve-card {
          @apply mb-2;
          height: 40px;
          span {
            @apply bg-theme-color p-3 rounded-md text-white cursor-pointer;
          }
          &:empty {
            background-color: transparent;
          }
        }
      }

      .line {
        @apply w-full;
        background: #ccc;
        height: 20px;
      }
    }
  }
}
</style>
